import { useEffect, useState } from 'react';
import { List, Popconfirm, Button, message, Avatar } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import { categoryManagement } from '../../../../apis/auth';
import './content.less'; // 引入自定义样式文件

const ProductCategory1 = () => {
    const [dataSource, setDataSource] = useState([]);
    const [loading, setLoading] = useState(true);
    const [count, setCount] = useState(1);
    const [pageSize, setPageSize] = useState(5);
    const [total, setTotal] = useState(0);

    const fetchCategories = async (count, pageSize) => {
        setLoading(true);
        try {
            const response = await categoryManagement.getAllCategories(count, pageSize);
            if (response.data.code === 200) {
                setDataSource(response.data.data.list);
                setTotal(response.data.data.total);
            } else {
                message.error(response.data.message);
            }
        } catch (error) {
            message.error('获取分类失败，请稍后再试');
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchCategories(count, pageSize);
    }, [count, pageSize]);

    const handleDelete = async (id, curTotal) => {
        setLoading(true);
        try {
            const response = await categoryManagement.deleteCategory(id, curTotal);
            if (response.data.code === 200) {
                message.success('删除成功');
                fetchCategories(count, pageSize);
            } else {
                message.error(response.data.message);
            }
        } catch (error) {
            message.error('删除失败，请稍后再试');
        } finally {
            setLoading(false);
        }
    };

    const renderItem = (item) => (
        <List.Item>
            <List.Item.Meta
                avatar={<Avatar icon={<DeleteOutlined />} />}
                title={<a href="#" style={{ fontWeight: 'bold' }}>{item.categoryName}</a>}
                description={`共计 ${item.curToal} 件商品`}
            />
            <Popconfirm
                title="确定要删除这个分类吗？"
                onConfirm={() => handleDelete(item.categoryId, item.curToal)}
                icon={<DeleteOutlined style={{ color: 'red' }} />}
                okText="是"
                cancelText="否"
            >
                <Button className="custom-button" icon={<DeleteOutlined />}>
                    删除分类
                </Button>
            </Popconfirm>
        </List.Item>
    );

    return (
        <div className="product-category">
            <List
                style={{ backgroundColor: '#ffffff', padding: '20px', borderRadius: '8px' }}
                itemLayout="horizontal"
                dataSource={dataSource}
                renderItem={renderItem}
                loading={loading}
                pagination={{
                    current: count,
                    pageSize: pageSize,
                    total: total,
                    onChange: (page, pageSize) => {
                        setCount(page);
                        setPageSize(pageSize);
                    },
                }}
            />
        </div>
    );
};

export default ProductCategory1;
